<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>debug12</title>
		<style>
			body
			{
				margin: 0;
				background-color: black;
			}
			#input
			{
				width: 100%;
				height: 40vh;
				background-color: brown;
			}
			#output
			{
				width: 100%;
				height: 60vh;
				background-color: cornflowerblue;
			}
			.midbyte
			{
				font-size: 10vmin;
				margin-left: 10vmin;
				height: 10vmin;
				width: 10vmin;
				border-radius: 2vmin;
				border: solid 2vmin royalblue;
			}
			.byteout
			{
				display: inline-flex;
				background-color: orchid;
				border-radius: 2vmin;
				border: solid 1vmin orangered;
			}
			.ckb
			{
				display: none;
			}
			.ckb:checked+.bit
			{
				background-color: aqua;
			}
			.bit
			{
				text-align: center;
				font-size: 4vmin;
				margin-left: 4vmin;
				height: 6vmin;
				width: 6vmin;
				color: crimson;
				background-color: coral;
				border-radius: 2vmin;
				border: solid 1vmin chartreuse;
				transition: .5s;
			}

		</style>
	</head>
	<body>
		<div id="bg">
			<div id="d0">
				<div id="input">
					<input type="text" maxlength="1" onchange="transl('2h')" class="midbyte" id="byte2h">
					<input type="text" maxlength="1" onchange="transl('2l')" class="midbyte" id="byte2l">
					<input type="text" maxlength="1" onchange="transl('1h')" class="midbyte" id="byte1h">
					<input type="text" maxlength="1" onchange="transl('1l')" class="midbyte" id="byte1l">
				</div>
				<div id="output">
					<div class="byteout" id="byte2hout">
						<input type="checkbox" class="ckb" id="b2hb3c">
						<div class="bit" id="b2hb3">15</div>
						<input type="checkbox" class="ckb" id="b2hb2c">
						<div class="bit" id="b2hb2">14</div>
						<input type="checkbox" class="ckb" id="b2hb1c">
						<div class="bit" id="b2hb1">13</div>
						<input type="checkbox" class="ckb" id="b2hb0c">
						<div class="bit" id="b2hb0">12</div>
					</div>
					<div class="byteout" id="byte2lout">
						<input type="checkbox" class="ckb" id="b2lb3c">
						<div class="bit" id="b2lb3">11</div>
						<input type="checkbox" class="ckb" id="b2lb2c">
						<div class="bit" id="b2lb2">10</div>
						<input type="checkbox" class="ckb" id="b2lb1c">
						<div class="bit" id="b2lb1">9</div>
						<input type="checkbox" class="ckb" id="b2lb0c">
						<div class="bit" id="b2lb0">8</div>
					</div>
					<div class="byteout" id="byte1hout">
						<input type="checkbox" class="ckb" id="b1hb3c">
						<div class="bit" id="b1hb3">7</div>
						<input type="checkbox" class="ckb" id="b1hb2c">
						<div class="bit" id="b1hb2">6</div>
						<input type="checkbox" class="ckb" id="b1hb1c">
						<div class="bit" id="b1hb1">5</div>
						<input type="checkbox" class="ckb" id="b1hb0c">
						<div class="bit" id="b1hb0">4</div>
					</div>
					<div class="byteout" id="byte1lout">
						<input type="checkbox" class="ckb" id="b1lb3c">
						<div class="bit" id="b1lb3">3</div>
						<input type="checkbox" class="ckb" id="b1lb2c">
						<div class="bit" id="b1lb2">2</div>
						<input type="checkbox" class="ckb" id="b1lb1c">
						<div class="bit" id="b1lb1">1</div>
						<input type="checkbox" class="ckb" id="b1lb0c">
						<div class="bit" id="b1lb0">0</div>
					</div>
				</div>
			</div>
		</div>
		<script>
			function getn(num)
			{
				if(num>='0'&&num<='9')
				{
					return num-'0';
				}
				else if(num=='a'||num=='A')
				{
					return 10;
				}
				else if(num=='b'||num=='B')
				{
					return 11;
				}
				else if(num=='c'||num=='C')
				{
					return 12;
				}
				else if(num=='d'||num=='D')
				{
					return 13;
				}
				else if(num=='e'||num=='E')
				{
					return 14;
				}
				else if(num=='f'||num=='F')
				{
					return 15;
				}
				else
				{
					return 0;
				}
				return 0;
			}
			function transl(mbn)
			{
				var n = getn(document.getElementById('byte'+mbn).value);
				document.getElementById('b'+mbn+'b3c').checked=(n&0x08)>>3;
				document.getElementById('b'+mbn+'b2c').checked=(n&0x04)>>2;
				document.getElementById('b'+mbn+'b1c').checked=(n&0x02)>>1;
				document.getElementById('b'+mbn+'b0c').checked=(n&0x01);
			}
		</script>
	</body>
</html>